<template>
  <div class="h-card">
    <slot name="icon"></slot>
    <div class="info">
      <h5>{{ data.title }}</h5>
      <p>{{ data.num | toThousands }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          title: '',
          num: 0
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.h-card {
  display: flex;
  align-items: center;
  text-align: center;
  width: 200px;
  height: 100px;
  background-color: #fff;
  i {
    flex: 1;
    color: orange;
    font-size: 30px;
  }
  .info {
    flex: 1;
    p {
      margin-top: 5px;
    }
  }
}
</style>
